<template>
  <div class="chat-container">
    <el-scrollbar class="chat-messages" v-loading="loading" element-loading-text="加载中，不要猴急" style="min-width: 100px">
      <div class="message" v-for="(msg, index) in messages" :key="index">
        <!-- 用户消息 -->
        <div v-if="msg.type === 'user'" class="message-row user-message">
          <div class="message-bubble">{{ msg.text }}</div>
          <img src="@/assets/images/person.svg" alt="avatar" class="avatar" />
        </div>
        <!-- 机器人回复 -->
        <div v-else class="message-row bot-message">
          <img src="@/assets/images/bot.svg" alt="avatar" class="avatar" />
          <div class="message-bubble" v-html="renderMarkdown(msg.text)"></div> <!-- 渲染 Markdown -->
        </div>
      </div>
    </el-scrollbar>

    <!-- 输入区 -->
    <div class="input-area-wrapper">
      <el-input
          type="textarea"
          v-model.lazy="inputMessage"
          placeholder="请输入问题"
          class="input-area"
          :rows="2"
          @keyup.enter="sendMessage"
      ></el-input>
      <el-button type="primary" @click="sendMessage" class="send-button">Send</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 选择高亮样式

const loading = ref(false);
const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang }).value}</code></pre>`;
      } catch (__) {}
    }
    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
  }
});

const inputMessage = ref('');
const messages = ref([]); // 使用数组存储消息记录

function renderMarkdown(text) {
  return md.render(text); // 使用配置好的 MarkdownIt 渲染
}

function sendMessage() {
  const trimmedMessage = inputMessage.value.trim(); // 去除空格
  if (trimmedMessage === '') return; // 如果输入框为空，则不发送

  loading.value = true; // 开始加载

  // 清空输入框内容
  inputMessage.value = '';

  // 将用户消息添加到消息记录中
  messages.value.push({ type: 'user', text: trimmedMessage });

  // 发起请求获取机器人的回复
  axios({
    method: 'GET',
    url: 'http://localhost:8080/res/' + trimmedMessage
  }).then(response => {
    const result = response.data.output.choices[0].message.content;
    console.log(result); // 查看返回的响应数据
    // 将机器人的回复添加到消息记录中
    messages.value.push({ type: 'bot', text: result });
  }).catch(error => {
    console.error("Error fetching response:", error);
  }).finally(() => {
    loading.value = false; // 结束加载
  });
}
</script>

<style scoped>
/* 样式可以保持不变，确保消息气泡的布局 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.message {
  display: block;
  margin-bottom: 10px;
}

.message-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 70%;
}

.hljs {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
  overflow-x: auto;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-message .message-bubble {
  background-color: #007bff;
  color: white;
  margin-left: auto;
}

.bot-message .message-bubble {
  background-color: #f0f0f0;
  color: #333;
}

.input-area-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-area {
  flex: 1;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #f9fafb;
}

.send-button {
  border-radius: 8px;
  padding: 8px 20px;
}
</style>
